<template>
  <basic-dialog
    :visible="state.visible"
    :loading="state.loading"
    :title="state.title"
    :width="state.width"
    :top="state.top"
    :cancel-button-text="state.cancelButtonText"
    :confirm-button-text="state.confirmButtonText"
    class="basic-custom__message-box"
    @closed="state.close"
    @submit="state.submit"
  >
    <div v-if="state.isHtml" v-html="state.content"></div>
    <template v-else>{{ state.content }}</template>
  </basic-dialog>
</template>

<script setup lang="ts">
import { useMessageBox } from '@/hooks/useMessageBox'

const { state } = useMessageBox()
</script>

<style lang="scss">
.basic-custom__message-box.el-dialog {
  .el-dialog__body {
    p {
      margin: 0;
      & + p {
        margin-top: 14px;
      }
    }
  }
}
</style>
